import React, { PropTypes } from 'react';
import { Button, Icon, Menu,Dropdown} from 'antd';
import styles from './style.less';
class Action extends React.Component{
    constructor(props) {
        super(props);
        this.state ={};
    }
    render() {
        const {addAction,deleteAction,exportAction,importAction,showBtns} = this.props;
        const menu = (
        <Menu onClick={this.props.exportAction}>
            <Menu.Item key="selection">导出选中行</Menu.Item>
            <Menu.Item key="page">导出当前页</Menu.Item>
            <Menu.Item key="all">导出全部</Menu.Item>
        </Menu>
        );
        return (
            <div className={ styles.action }>
                {
                    showBtns.indexOf('add') !== -1 ?
                    <Button key="addBtn" onClick={this.props.addAction}>
                        <Icon type="file-add" />
                        新增
                    </Button>
                    :""
                }

                {
                   showBtns.indexOf('delete') !== -1 ?
                    <Button key="delBtn" onClick={this.props.deleteAction}>
                        <Icon type="delete" />
                        删除
                    </Button>
                    : ""
                }

                {
                   showBtns.indexOf('import') !== -1 ?
                    <Button key="importBtn" onClick={this.props.importAction}>
                        <Icon type="to-top" />
                        导入
                    </Button>
                    : ""
                }

                {
                   showBtns.indexOf('export') !== -1 ?
                    <Dropdown overlay={menu} trigger = {['click']}>
                        <Button style={{ marginLeft: 8 }}>
                            <Icon type="export" />导出 <Icon type="down" />
                        </Button>
                    </Dropdown>
                    // <Button style={{ marginLeft: 8 }} onClick={this.props.exportAction}>
                    //         <Icon type="export" />导出 <Icon type="down" />
                    //     </Button>
                    : ""

                }

            </div >
        );
    }
}
// 传入属性类型
// Action.propTypes = {
//     // 一个数组用来指定显示那些按钮，默认显示所有
//     showBtns      : PropTypes.array,
//     addAction     : PropTypes.func,
//     deleteAction  : PropTypes.func,
//     importAction  : PropTypes.func,
//     exportAction  : PropTypes.func,
// };
// 属性不成立的是的默认值
Action.defaultProps = {
    addAction     : function() {console.log('add 事件属性未传入')},
    deleteAction  : function() {console.log('delete 事件属性未传入')},
    exportAction  : function() {console.log('export 事件属性未传入')},
    importAction  : function () { console.log('import 事件属性未传入')},
    showBtns:['add','delete','export','import'],
};
export default Action;
